<template>
    <div class="trade-orders">
        <!-- <div class="header"> -->
            <!-- <div class="title">Historical Orders</div> -->
            <!-- <div class="btn">View All</div> -->
        <!-- </div> -->
        <!-- <div class="order-list">
            <div class="order-item" v-for="item in orders" :key="item.id">
                <div class="left-box">
                    <div class="symbol">{{ item.symbol }}</div>
                    <div class="count">{{ item.count }} shares @ ${{ item.price }}</div>
                </div>
                <div class="right-box">
                    <div class="type" :style="`color: ${ item.type == 'Buy' ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ item.type }}</div>
                    <div class="date">{{ item.date }}</div>
                </div>
            </div>
        </div> -->
        <div class="select-list">
            <div class="select-item" v-for="item in select_list" :key="item.id" :style="`color: ${ item.id == select_item.id ? 'var(--active-color)' : 'var(--text-color)' }; border-bottom: 0.5vw solid ${ item.id == select_item.id ? 'var(--active-color)' : '#00000000' }`" @click="select_item = item">{{ item.name }}</div>
        </div>
        <div class="list-box">
            <div class="holding-orders" v-show="select_item.id == 1">
                <div class="holding-list">
                    <div class="holding-item" v-show="is_login" v-for="item in holding" :key="item.id">
                        <div class="header">
                            <div class="left-box">{{ item.symbol }} / <span>{{ item.share }} Shares @ ${{ item.avgPrice }}</span></div>
                            <div class="right-box">{{ item.price }}</div>
                        </div>
                        <div class="main">
                            <div class="left-box">
                                <div class="name">{{ item.name }}</div>
                            </div>
                            <div class="right-box">
                                <div class="top" :style="`color: ${ parseFloat(item.change_rate) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">${{ item.total_value }} {{ addUnit(item.total_change) }}</div>
                                <div class="bottom" :style="`color: ${ parseFloat(item.change_rate) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ parseFloat(item.change_rate) >= 0 ? '+' : '' }} {{ item.change_rate }}%</div>
                            </div>
                        </div>
                        <!-- <div class="btn-box">
                            <div class="btn" style="background-color: var(--positive-number-color);">Buy</div>
                            <div class="btn" :style="`background-color: ${ market_status.close ? 'var(--negative-number-color)' : 'var(--text-light-color)' }`">Sell</div>
                        </div> -->
                    </div>
                    <div class="no-data" v-show="is_login == false || holding.length == 0">
                        <div class="icon"></div>
                        <div class="text-box">
                            <div class="text">{{ is_login ? 'No Data' : 'Log Out,' }}</div>
                            <div class="link" v-show="is_login == false" @click="routerTo('/login')">Login Now</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="limit-orders" v-show="select_item.id == 2">
                <div class="limit-list">
                    <div class="limit-item" v-show="is_login" v-for="item in limit" :key="item.id">
                        <div class="header">
                            <div class="left-box">
                                <div class="symbol-box">
                                    <div class="symbol">{{ item.symbol }}</div>
                                    <div class="open-side" :style="`color: ${ side_list[item.openSide].tc }; background-color: ${ side_list[item.openSide].bg }`">{{ side_list[item.openSide].text }}</div>
                                </div>
                                <div class="price">{{ item.share }} Shares @ ${{ item.openPrice }}</div>
                            </div>
                            <div class="right-box">{{ item.price }}</div>
                        </div>
                        <div class="main">
                            <div class="top-box">
                                <div class="left-box">{{ item.name }}</div>
                                <div class="right-box">
                                    <div class="change" :style="`color: ${ parseFloat(item.change) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ item.change_price }}</div>
                                    <div class="change-rate" :style="`color: ${ parseFloat(item.change) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ item.change }}</div>
                                </div>
                            </div>
                            <div class="bottom-box">
                                <div class="left-box">{{ item.createTime }}</div>
                                <div class="right-box" :style="`color: ${ limit_status[item.status].tc }; background-color: ${ limit_status[item.status].bg }`">{{ limit_status[item.status].text }}</div>
                            </div>
                        </div>
                        <div class="btn-box" v-show="item.status == 0">
                            <div class="btn modify-btn">Modify</div>
                            <div class="btn cancel-btn" :style="`background-color: ${ item.status == 0 ? 'var(--negative-number-color)' : 'var(--text-light-color)' }`" @click="openCancelLimitSelector(item)">Cancel</div>
                        </div>
                    </div>
                    <div class="no-data" v-show="is_login == false || limit.length == 0">
                        <div class="icon"></div>
                        <div class="text-box">
                            <div class="text">{{ is_login ? 'No Data' : 'Log Out,' }}</div>
                            <div class="link" v-show="is_login == false" @click="routerTo('/login')">Login Now</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="closed-orders" v-show="select_item.id == 3">
                <div class="closed-list">
                    <div class="closed-item" v-show="is_login" v-for="item in closed" :key="item.id">
                        <div class="header">
                            <div class="left-box">{{ item.symbol }} / <span>{{ item.share }} Shares @ ${{ item.avgPrice }}</span></div>
                            <div class="right-box">${{ item.closePrice }}</div>
                        </div>
                        <div class="main">
                            <div class="left-box">
                                <div class="name">{{ item.name }}</div>
                            </div>
                            <div class="right-box">
                                <div class="top" :style="`color: ${ parseFloat(item.closePrice) >= parseFloat(item.avgPrice) ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ addUnit(((parseFloat(item.closePrice) - parseFloat(item.avgPrice)) * item.share).toFixed(2)) }}</div>
                                <div class="bottom" :style="`color: ${ parseFloat(item.closePrice) >= parseFloat(item.avgPrice) ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ ((parseFloat(item.closePrice) - parseFloat(item.avgPrice)) / parseFloat(item.avgPrice) * 100).toFixed(2) }}%</div>
                            </div>
                        </div>
                        <div class="bottom-box">
                            <div class="left-box">{{ item.closeTime }}</div>
                            <div class="right-box" :style="`color: ${ parseFloat(item.closePrice) >= parseFloat(item.avgPrice) ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ addUnit((parseFloat(item.closePrice) * item.share).toFixed(2)) }} (-${{ item.fee }})</div>
                        </div>
                    </div>
                    <div class="no-data" v-show="is_login == false || closed.length == 0">
                        <div class="icon"></div>
                        <div class="text-box">
                            <div class="text">{{ is_login ? 'No Data' : 'Log Out,' }}</div>
                            <div class="link" v-show="is_login == false" @click="routerTo('/login')">Login Now</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { stock_list, market_status } from '@/service/market';
import { assetService, holding_list, open_list, close_list } from '@/service/asset.js';
import { format_utc5 } from '@/utils/time.js';
import { addUnit } from '@/utils/price.js';
import { is_login } from "@/service/auth";
import { routerTo } from '@/utils/jump';
import { cancelLimitPage } from '@/service/trading';

const select_list = [
    { id: 1, name: 'Holding Orders' },
    { id: 2, name: 'Limit Orders' },
    { id: 3, name: 'Closed Orders' },
];

const select_item = ref(select_list[0]);

// 表示三种状态 0 待成交 1 已成交 2 已撤销
const limit_status = {
    0: {
        text: 'Pending',
        bg: '#fef9c3',
        tc: '#854d0e',
    },
    1: {
        text: 'Completed',
        bg: '#dcfce7',
        tc: '#166534',
    },
    2: {
        text: 'Canceled',
        bg: '#fee2e2',
        tc: '#991b1b',
    }
};

// 表示买入或者卖出
const side_list = {
    0: {
        text: 'Buy',
        tc: '#15803d',
        bg: '#dcfce7',
    },
    1: {
        text: 'Sell',
        tc: '#b91c1c',
        bg: '#fee2e2',
    }
};

const holding = computed(() => {
    let res = [];
    for (let i = 0; i < holding_list.value.length; i++) {
        let item = holding_list.value[i];
        let price = '$' + item.avgPrice;
        for (let j = 0; j < stock_list.value.length; j++) {
            if (stock_list.value[j].symbol === item.marketSymbol) {
                price = stock_list.value[j].price;
                break;
            }
        }
        let obj = {
            id: item.id,
            symbol: item.marketSymbol,
            share: item.shares,
            avgPrice: item.avgPrice,
            name: item.name,
            price,
            total_value: (item.shares * parseFloat(item.avgPrice)).toFixed(2),
            total_change: (item.shares * (parseFloat(price.slice(1)) - parseFloat(item.avgPrice))).toFixed(2),
            change_rate: ((parseFloat(price.slice(1)) - parseFloat(item.avgPrice)) / parseFloat(item.avgPrice) * 100).toFixed(2),
        }
        res.push(obj);
    }
    return res;
});

const limit = computed(() => {
    let res = [];
    for (let i = 0; i < open_list.value.length; i++) {
        let item = open_list.value[i];
        if (item.openType == 0) { continue; }
        let price = '$' + item.openPrice;
        let symbol = '';
        let change_price, change;
        for (let j = 0; j < stock_list.value.length; j++) {
            if (stock_list.value[j].name == item.fullName) {
                price = stock_list.value[j].price;
                symbol = stock_list.value[j].symbol;
                change_price = stock_list.value[j].change_price;
                change = stock_list.value[j].change;
                break;
            }
        }
        let obj = {
            id: item.id,
            symbol,
            openSide: item.openSide,
            share: item.quantity,
            openPrice: item.openPrice,
            name: item.fullName,
            createTime: format_utc5(item.createTime * 1000),
            status: item.status,
            price,
            change_price,
            change,
        };
        res.push(obj);
    }
    return res;
});

const closed = computed(() => {
    let res = [];
    for (let i = 0; i < close_list.value.length; i++) {
        let item = close_list.value[i];
        let symbol = '';
        for (let j = 0; j < stock_list.value.length; j++) {
            if (stock_list.value[j].name == item.fullName) {
                symbol = stock_list.value[j].symbol;
                break;
            }
        }
        let obj = {
            id: item.id,
            symbol,
            share: item.quantity,
            avgPrice: item.avgPrice,
            closePrice: item.closePrice,
            name: item.fullName,
            fee: item.fee,
            closeTime: format_utc5(item.closeTime * 1000),
        };
        res.push(obj);
    }
    return res;
});

// 弹出撤销限价订单的确认框
function openCancelLimitSelector(item) {
    if (item.status == 0) {
        // 弹出确认框
        cancelLimitPage.open(item.id);
    } else {
        // TODO: 提示不能撤销
    }
}

onMounted(() => {
    assetService.getStockOrderList();
    assetService.getStockOpenList();
    assetService.getStockCloseList();
});
</script>

<style scoped lang="less">
.trade-orders {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3vw;

    // .header {
    //     display: flex;
    //     justify-content: space-between;

    //     .title {
    //         font-size: 3.5vw;
    //         font-weight: 700;
    //         color: var(--text-color);
    //     }

    //     .btn {
    //         font-size: 2.5vw;
    //         color: var(--active-color);
    //     }
    // }

    // .order-list {
    //     display: flex;
    //     flex-direction: column;
    //     gap: 2vw;

    //     .order-item {
    //         display: flex;
    //         justify-content: space-between;
    //         padding: 2.5vw;
    //         background-color: var(--bg-color);

    //         .left-box, .right-box {
    //             display: flex;
    //             flex-direction: column;
    //             gap: 1vw;
    //         }

    //         .left-box {
    //             .symbol {
    //                 font-size: 3.5vw;
    //                 font-weight: 700;
    //                 color: var(--text-color);
    //             }

    //             .count {
    //                 font-size: 3vw;
    //                 font-weight: 700;
    //                 color: var(--text-light-color);
    //             }
    //         }

    //         .right-box {
    //             align-items: flex-end;

    //             .type {
    //                 font-size: 3.5vw;
    //                 font-weight: 500;
    //             }

    //             .date {
    //                 font-size: 3vw;
    //                 color: var(--text-light-color);
    //             }
    //         }
    //     }
    // }

    .select-list {
        display: flex;
        gap: 5vw;

        .select-item {
            font-size: 3.5vw;
            font-weight: 500;
            padding: 2vw 0;
        }
    }

    .list-box {
        min-height: 50vh;

        .no-data {
            width: 100%;
            height: 50vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .icon {
                --size: 20vw;
                --w: var(--size);
                --h: var(--size);
                --icon: url(/icon/show/no-data.svg);
            }

            .text-box {
                display: flex;
                align-items: center;
                gap: 1vw;

                .text, .link {
                    font-size: 3vw;
                    font-weight: 500;
                }

                .link {
                    cursor: pointer;
                    color: var(--active-color);
                }
            }
        }
    }

    .holding-orders {
        width: 100%;

        .holding-list {
            display: flex;
            flex-direction: column;
            gap: 2vw;

            .holding-item {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                gap: 2vw;
                padding: 3vw;
                border-radius: 2vw;
                background-color: #fff;
                box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1);

                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left-box {
                        display: flex;
                        align-items: center;
                        font-size: 3.5vw;
                        font-weight: 500;
                        gap: 1vw;

                        span {
                            font-size: 3vw;
                            color: var(--text-light-color);
                        }
                    }

                    .right-box {
                        font-size: 3.5vw;
                        font-weight: 500;
                    }
                }

                .main {
                    display: flex;
                    justify-content: space-between;
                    gap: 2vw;

                    .left-box {
                        display: flex;
                        align-items: center;
                        font-size: 3.5vw;

                        .name {
                            font-size: 3vw;
                            font-weight: 500;
                            color: var(--text-light-color);
                        }
                    }

                    .right-box {
                        display: flex;
                        flex-direction: column;
                        align-items: self-end;
                        gap: 0.5vw;

                        .top {
                            display: flex;
                            gap: 1vw;
                            font-size: 3vw;
                            font-weight: 500;
                        }

                        .bottom {
                            font-size: 3vw;
                            font-weight: 500;
                        }
                    }
                }

                .btn-box {
                    display: flex;
                    gap: 2vw;

                    .btn {
                        flex: 1;
                        height: 8vw;
                        font-size: 3vw;
                        font-weight: 500;
                        text-align: center;
                        line-height: 8vw;
                        color: #fff;
                        border-radius: 1.5vw;
                    }
                }
            }
        }
    }

    .limit-orders {
        width: 100%;

        .limit-list {
            display: flex;
            flex-direction: column;
            gap: 2vw;

            .limit-item {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                gap: 2vw;
                padding: 3vw;
                border-radius: 2vw;
                background-color: #fff;
                box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1);

                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left-box {
                        display: flex;
                        flex-direction: column;
                        gap: 1vw;

                        .symbol-box {
                            display: flex;
                            align-items: center;
                            gap: 2vw;

                            .symbol {
                                font-size: 3.5vw;
                                font-weight: 500;
                            }

                            .open-side {
                                padding: 1vw 2vw;
                                font-size: 2.5vw;
                                font-weight: 500;
                            }
                        }

                        .price {
                            font-size: 3vw;
                            font-weight: 500;
                        }
                    }

                    .right-box {
                        font-size: 3.5vw;
                        font-weight: 500;
                    }
                }

                .main {
                    display: flex;
                    flex-direction: column;
                    gap: 2vw;

                    .top-box {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .left-box {
                            font-size: 3vw;
                            font-weight: 500;
                            color: var(--text-light-color);
                        }

                        .right-box {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            gap: 1vw;

                            .change {
                                font-size: 3vw;
                            }

                            .change-rate {
                                font-size: 3vw;
                            }
                        }
                    }

                    .bottom-box {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .left-box {
                            font-size: 3vw;
                        }

                        .right-box {
                            padding: 1vw 2vw;
                            border-radius: 1vw;
                            font-size: 3vw;
                        }
                    }
                }

                .btn-box {
                    display: flex;
                    gap: 2vw;

                    .btn {
                        flex: 1;
                        height: 8vw;
                        font-size: 3vw;
                        font-weight: 500;
                        text-align: center;
                        line-height: 8vw;
                        color: #fff;
                        border-radius: 1.5vw;

                        &.modify-btn {
                            background-color: var(--positive-number-color);
                        }
                    }
                }
            }
        }
    }

    .closed-orders {
        width: 100%;

        .closed-list {
            display: flex;
            flex-direction: column;
            gap: 2vw;

            .closed-item {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                gap: 2vw;
                padding: 3vw;
                border-radius: 2vw;
                background-color: #fff;
                box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1);

                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left-box {
                        font-size: 3.5vw;
                        font-weight: 500;

                        span {
                            font-size: 3vw;
                            color: var(--text-light-color);
                        }
                    }

                    .right-box {
                        font-size: 3.5vw;
                        font-weight: 500;
                    }
                }

                .main {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left-box {
                        .name {
                            font-size: 3vw;
                            font-weight: 500;
                            color: var(--text-light-color);
                        }
                    }

                    .right-box {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        gap: 1vw;

                        .top, .bottom {
                            font-size: 3vw;
                            font-weight: 500;
                        }
                    }
                }

                .bottom-box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left-box {
                        font-size: 3vw;
                    }

                    .right-box {
                        font-size: 3vw;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}
</style>